<template>
	<div>
		<mj-title type="h2" title="Pagination 分页"></mj-title>
		<div class="page-desc">当数据量较多时，使用分页可以快速进行数据切换。</div>

		<mj-title type="h5" title="基础使用"></mj-title>
		<div class="page-desc" style="margin-bottom:10px;">基本的分页，页数过多时会自动折叠。</div>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
				<mj-page
				    :total="100"
				    :show-elevator=true
				    :page-size="pagesize"
				    @prev-click="prevClick"
				    @next-click="nextClick"
				    @prev-quick-click="prevQuickClick"
				    @next-quick-click="nextQuickClick"
				    @page-click="pageClick"
				    @current-change="currentChange"
				    @jumpe="pageJumpe"
				    @page-size-change="pageSizeChange"
				/>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
				<pre>
					<code class="language-html line-numbers">
					&lt;template>
						&lt;mj-page
						    :total="100"
						    @prev-click="prevClick"
						    @next-click="nextClick"
						    @prev-quick-click="prevQuickClick"
						    @next-quick-click="nextQuickClick"
						    @page-click="pageClick"
						    @current-change="currentChange"
						    @jumpe="pageJumpe"
						    @page-size-change="pageSizeChange"
						/>
					&lt;/template>
					&lt;script>
					export default {
						methods:{
						    prevClick(page) {
						        console.log('上一页', page);
						    },
						    nextClick(page) {
						        console.log('下一页', page);
						    },
						    pageClick(page) {
						        console.log('分页点击', page);
						    },
						    pageJumpe(page) {
						        console.log('跳转', page);
						    },
						    prevQuickClick(page) {
						        console.log('快速向前切换', page);
						    },
						    nextQuickClick(page) {
						        console.log('快速向后切换', page);
						    },
						    currentChange(page, old) {
						        console.log('分页切换', page, '切换前分页', old);
						    },
						    pageSizeChange(page) {
						    	console.log('每页显示条数切换',page)
						    }
						}
					}
					&lt;/script>
					</code>
				</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="显示所有功能"></mj-title>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
				<mj-page
				    :total="50"
					:show-total=true
					:show-elevator=true
					:show-jumper=true
				/>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
				<pre>
					<code class="language-html line-numbers">
					&lt;template>
						&lt;mj-page
						    :total="50"
							:show-total=true
							:show-elevator=true
							:show-jumper=true
						/>
					&lt;/template>
					</code>
				</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="小型分页样式"></mj-title>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
				<mj-page :total="50" size="small" />
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
				<pre>
					<code class="language-html line-numbers">
					&lt;template>
						&lt;mj-page :total="50" size="small" />
					&lt;/template>
					</code>
				</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="简单模式"></mj-title>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
				<mj-page :total="50" :simple="true" />
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
				<pre>
					<code class="language-html line-numbers">
					&lt;template>	
						&lt;mj-page :total="50" :simple="true" />
					&lt;/template>
					</code>
				</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="API"></mj-title>
		<mj-title type="h6" title="Pagination 参数"></mj-title>
		<table class="api-table">

			<thead>
				<tr>
					<th>属性</th>
					<th>说明</th>
					<th>类型</th>
					<th>默认值</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>total</td>
					<td>数据总数</td>
					<td>Number</td>
					<td>0</td>
				</tr>
				<tr>
					<td>current-page</td>
					<td>当前页码</td>
					<td>Number</td>
					<td>1</td>
				</tr>
				<tr>
					<td>pager-count</td>
					<td>页码显示数量</td>
					<td>Number</td>
					<td>10</td>
				</tr>
				<tr>
					<td>page-size</td>
					<td>每页条数，如手动配置<code>page-size-opts</code>，需和数组中值对应</td>
					<td>Number</td>
					<td>10</td>
				</tr>
				<tr>
					<td>page-size-opts</td>
					<td>每页条数切换的配置</td>
					<td>Array</td>
					<td> [10,20,50,100]</td>
				</tr>
				<tr>
					<td>show-total</td>
					<td>显示总数</td>
					<td>Boolean</td>
					<td>false</td>
				</tr>
				<tr>
					<td>show-elevator</td>
					<td>显示电梯，可以快速切换到某一页</td>
					<td>Boolean</td>
					<td>false</td>
				</tr>
				<tr>
					<td>show-jumper</td>
					<td>显示分页跳转</td>
					<td>Boolean</td>
					<td>false</td>
				</tr>
				<tr>
					<td>size</td>
					<td>可设置<code>samll</code>小型分页样式</td>
					<td>String</td>
					<td>-</td>
				</tr>
				<tr>
					<td>simple</td>
					<td>简单模式，没有背景色</td>
					<td>Boolean</td>
					<td>false</td>
				</tr>
			</tbody>
		</table>

		<mj-title type="h6" title="Pagination 事件"></mj-title>
		<table class="api-table">
			<thead>
				<tr>
					<th>事件名</th>
					<th>说明</th>
					<th>返回值</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>page-click</td>
					<td>分页点击</td>
					<td>page</td>
				</tr>
				<tr>
					<td>prev-click</td>
					<td>切换上一页时触发，返回切换后的页码</td>
					<td>page</td>
				</tr>
				<tr>
					<td>next-click</td>
					<td>切换下一页时触发，返回切换后的页码</td>
					<td>page</td>
				</tr>
				<tr>
					<td>prev-quick-click</td>
					<td>快速向前切换，每次跳3页</td>
					<td>page</td>
				</tr>
				<tr>
					<td>next-quick-click</td>
					<td>快速向后切换，每次跳3页</td>
					<td>page</td>
				</tr>
				<tr>
					<td>current-change</td>
					<td>分页切换，返回当前页码和上一页码</td>
					<td>page,old-page</td>
				</tr>
				<tr>
					<td>jumpe</td>
					<td>分页跳转</td>
					<td>page</td>
				</tr>
				<tr>
					<td>page-size-change</td>
					<td>切换每页条数时的回调，返回切换后的每页条数</td>
					<td>page-size</td>
				</tr>
			</tbody>
		</table>
	</div>
</template>

<script>
export default {
	data() {
		return {
			pagesize:10
		}
	},
	methods:{
	    prevClick(page) {
	        console.log('上一页', page);
	    },
	    nextClick(page) {
	        console.log('下一页', page);
	    },
	    pageClick(page) {
	        console.log('分页点击', page);
	    },
	    pageJumpe(page) {
	        console.log('跳转', page);
	    },
	    prevQuickClick(page) {
	        console.log('快速向前切换', page);
	    },
	    nextQuickClick(page) {
	        console.log('快速向后切换', page);
	    },
	    currentChange(page, old) {
	        console.log('分页切换', page, '切换前分页', old);
	    },
	    pageSizeChange(page) {
	    	console.log('每页显示条数切换',page)
	    	this.pagesize = page
	    }
	}
}
</script>